<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>GoJS&reg; Layout Class</title>
        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="../../assets/js/bootstrap.min.js"></script>
    <script src="../../assets/js/highlight.js"></script>
    <script src="../../assets/js/api.js"></script>

    <link href="../../assets/css/bootstrap.min.css" rel="stylesheet" >
    <!-- custom CSS after bootstrap -->
    <link href="../../assets/css/main.css" rel="stylesheet" type="text/css"/>
    <link href="../../assets/css/api.css" rel="stylesheet" type="text/css"/>
    <!--<link rel="stylesheet" href="../../assets/css/api.css" type="text/css" media="all" />-->
    <link rel="stylesheet" href="../../assets/css/highlight.css" type="text/css" media="all" />

    </head>

    <body>
    <!--
  <div id="topbar">
    <div id="topbar-inner">
      <ul>
        <li><a href="../../index.html">Home</a></li>
        <li><a href="../../learn/index.html">Learn</a></li>
        <li><a href="../../samples/index.html">Samples</a></li>
        <li><a href="../../intro/index.html">Intro</a></li>
        <li><a href="../index.html">API</a></li>
        <li><a href="https://www.nwoods.com/components/evalform.htm">Register</a></li>
        <li><a href="../../doc/download.html">Download</a></li>
        <li><a href="https://forum.nwoods.com/c/gojs">Forum</a></li>
        <li><a href="https://www.nwoods.com/support/query.htm">Contact</a></li>
        <li class="buy"><a href="https://www.nwoods.com/sales/ordering.htm">Buy</a></li>
        <li class="activate"><a href="https://www.nwoods.com/app/activate.aspx?sku=gojs">Activate</a></li>
      </ul>
    </div>
  </div>
-->


  <!-- non-fixed navbar -->
    <nav id="api-nav" class="navbar navbar-inverse navbar-top">
      <div class="container">
        <div class="navbar-header" data-toggle="collapse" data-target="#navbar">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <!--<a class="navbar-brand" href="#">GoJS</a>-->
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="../../index.html">Home</a></li>
            <li><a href="../../learn/index.html">Learn</a></li>
            <li><a href="../../samples/index.html">Samples</a></li>
            <li><a href="../../intro/index.html">Intro</a></li>
            <li><a href="../../api/index.html">API</a></li>
            <li><a href="https://www.nwoods.com/components/evalform.htm">Register</a></li>
            <li><a href="../../doc/download.html">Download</a></li>
            <li><a href="https://forum.nwoods.com/c/gojs">Forum</a></li>
            <li><a href="https://www.nwoods.com/support/query.htm">Contact</a></li>
            <li class="buy"><a href="https://www.nwoods.com/sales/ordering.htm">Buy</a></li>
            <li class="activate"><a href="https://www.nwoods.com/app/activate.aspx?sku=gojs">Activate</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>


    <div class="container-fluid" id="api-container">
    <div class="row">

<!-- ============================== classes index ============================ -->
     <div id="navindex" class="col-md-2">
        <!-- begin publish.classesIndex -->
        <!-- <div><a href="../index.html">GoJS Class Index</a></div> -->

<div class="sidebar-nav">
  <div class="navbar navbar-default" role="navigation">
    <div class="navbar-header" data-toggle="collapse" data-target="#DiagramNavbar">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#DiagramNavbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <span class="navbar-brand">Diagram Classes</span>
    </div>
    <div id="DiagramNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
    <ul class="classList nav navbar-nav">
      
        
      
        
      
        <li><a href="../symbols/Adornment.html" class="linkConstructor">Adornment</a></li>
      
        <li><a href="../symbols/AnimationManager.html" class="linkConstructor">AnimationManager</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/CommandHandler.html" class="linkConstructor">CommandHandler</a></li>
      
        
      
        <li><a href="../symbols/Diagram.html" class="linkConstructor">Diagram</a></li>
      
        <li><a href="../symbols/DiagramEvent.html" class="linkConstructor">DiagramEvent</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a></li>
      
        
      
        <li><a href="../symbols/Group.html" class="linkConstructor">Group</a></li>
      
        <li><a href="../symbols/InputEvent.html" class="linkConstructor">InputEvent</a></li>
      
        
      
        
      
        <li><a href="../symbols/Layer.html" class="linkConstructor">Layer</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/Link.html" class="linkConstructor">Link</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/Node.html" class="linkConstructor">Node</a></li>
      
        <li><a href="../symbols/Overview.html" class="linkConstructor">Overview</a></li>
      
        <li><a href="../symbols/Palette.html" class="linkConstructor">Palette</a></li>
      
        <li><a href="../symbols/Panel.html" class="linkConstructor">Panel</a></li>
      
        
      
        <li><a href="../symbols/Part.html" class="linkConstructor">Part</a></li>
      
        
      
        
      
        <li><a href="../symbols/Picture.html" class="linkConstructor">Picture</a></li>
      
        <li><a href="../symbols/Placeholder.html" class="linkConstructor">Placeholder</a></li>
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/RowColumnDefinition.html" class="linkConstructor">RowColumnDefinition</a></li>
      
        
      
        <li><a href="../symbols/Shape.html" class="linkConstructor">Shape</a></li>
      
        
      
        
      
        <li><a href="../symbols/TextBlock.html" class="linkConstructor">TextBlock</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
    </ul>
    </div>
  </div>

  <div class="navbar navbar-default" role="navigation">
    <div class="navbar-header" data-toggle="collapse" data-target="#GeometryNavbar">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#GeometryNavbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <span class="navbar-brand">Geometry Classes</span>
    </div>
    <div id="GeometryNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
    <ul class="classList nav navbar-nav">
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/Brush.html" class="linkConstructor">Brush</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/Geometry.html" class="linkConstructor">Geometry</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/Margin.html" class="linkConstructor">Margin</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/PathFigure.html" class="linkConstructor">PathFigure</a></li>
      
        <li><a href="../symbols/PathSegment.html" class="linkConstructor">PathSegment</a></li>
      
        
      
        
      
        <li><a href="../symbols/Point.html" class="linkConstructor">Point</a></li>
      
        <li><a href="../symbols/Rect.html" class="linkConstructor">Rect</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/Size.html" class="linkConstructor">Size</a></li>
      
        <li><a href="../symbols/Spot.html" class="linkConstructor">Spot</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
    </ul>
    </div>
  </div>

  <div class="navbar navbar-default" role="navigation">
    <div class="navbar-header" data-toggle="collapse" data-target="#ModelNavbar">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#ModelNavbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <span class="navbar-brand">Model Classes</span>
    </div>
    <div id="ModelNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
    <ul class="classList nav navbar-nav">
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/Binding.html" class="linkConstructor">Binding</a></li>
      
        
      
        <li><a href="../symbols/ChangedEvent.html" class="linkConstructor">ChangedEvent</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/GraphLinksModel.html" class="linkConstructor">GraphLinksModel</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/Model.html" class="linkConstructor">Model</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/Transaction.html" class="linkConstructor">Transaction</a></li>
      
        
      
        
      
        <li><a href="../symbols/TreeModel.html" class="linkConstructor">TreeModel</a></li>
      
        
      
        <li><a href="../symbols/UndoManager.html" class="linkConstructor">UndoManager</a></li>
      
    </ul>
    </div>
  </div>

  <div class="navbar navbar-default" role="navigation">
    <div class="navbar-header" data-toggle="collapse" data-target="#LayoutNavbar">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#LayoutNavbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <span class="navbar-brand">Layout Classes</span>
    </div>
    <div id="LayoutNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
    <ul class="classList nav navbar-nav">
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/CircularLayout.html" class="linkConstructor">CircularLayout</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/ForceDirectedLayout.html" class="linkConstructor">ForceDirectedLayout</a></li>
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/GridLayout.html" class="linkConstructor">GridLayout</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/LayeredDigraphLayout.html" class="linkConstructor">LayeredDigraphLayout</a></li>
      
        
      
        <li><a href="../symbols/Layout.html" class="linkConstructor">Layout</a></li>
      
        
      
        <li><a href="../symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/TreeLayout.html" class="linkConstructor">TreeLayout</a></li>
      
        
      
        
      
        
      
    </ul>
    </div>
  </div>

  <div class="navbar navbar-default" role="navigation">
    <div class="navbar-header" data-toggle="collapse" data-target="#ToolNavbar">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#ToolNavbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <span class="navbar-brand">Tool Classes</span>
    </div>
    <div id="ToolNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
    <ul class="classList nav navbar-nav">
      
        
      
        <li><a href="../symbols/ActionTool.html" class="linkConstructor">ActionTool</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/ClickCreatingTool.html" class="linkConstructor">ClickCreatingTool</a></li>
      
        <li><a href="../symbols/ClickSelectingTool.html" class="linkConstructor">ClickSelectingTool</a></li>
      
        
      
        <li><a href="../symbols/ContextMenuTool.html" class="linkConstructor">ContextMenuTool</a></li>
      
        
      
        
      
        <li><a href="../symbols/DraggingTool.html" class="linkConstructor">DraggingTool</a></li>
      
        <li><a href="../symbols/DragSelectingTool.html" class="linkConstructor">DragSelectingTool</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/LinkingBaseTool.html" class="linkConstructor">LinkingBaseTool</a></li>
      
        <li><a href="../symbols/LinkingTool.html" class="linkConstructor">LinkingTool</a></li>
      
        <li><a href="../symbols/LinkReshapingTool.html" class="linkConstructor">LinkReshapingTool</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/PanningTool.html" class="linkConstructor">PanningTool</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/RelinkingTool.html" class="linkConstructor">RelinkingTool</a></li>
      
        <li><a href="../symbols/ResizingTool.html" class="linkConstructor">ResizingTool</a></li>
      
        <li><a href="../symbols/RotatingTool.html" class="linkConstructor">RotatingTool</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/TextEditingTool.html" class="linkConstructor">TextEditingTool</a></li>
      
        <li><a href="../symbols/Tool.html" class="linkConstructor">Tool</a></li>
      
        <li><a href="../symbols/ToolManager.html" class="linkConstructor">ToolManager</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
    </ul>
    </div>
  </div>

  <div class="navbar navbar-default" role="navigation">
    <div class="navbar-header" data-toggle="collapse" data-target="#CollectionNavbar">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#CollectionNavbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <span class="navbar-brand">Collection Classes</span>
    </div>
    <div id="CollectionNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
    <ul class="classList nav navbar-nav">
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/Iterable.html" class="linkConstructor">Iterable</a></li>
      
        <li><a href="../symbols/Iterator.html" class="linkConstructor">Iterator</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/List.html" class="linkConstructor">List</a></li>
      
        <li><a href="../symbols/Map.html" class="linkConstructor">Map</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/Set.html" class="linkConstructor">Set</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
    </ul>
    </div>
  </div>
</div> <!-- /class="sidebar-nav -->




        <!-- end publish.classesIndex -->
    </div>

    <div id="contentBody" class="col-md-10">
    <!-- ============================== header ================================= -->
    <div id="header" class="fineprint mt30">
      <b>GoJS</b>&reg; Diagramming Components<br/>version 1.6.10 for JavaScript/HTML<br/>by <a href="https://www.nwoods.com/">Northwoods Software&reg;</a>
    </div>

<!-- ============================== class title ============================ -->
            <h2 class="classTitle mt30">
                
                Class Layout
                
            </h2>

<!-- ============================== class summary ========================== -->
      <span class="hideshowall">
        <span class="nodetails"><button id="buttonShow">Show Details</button></span>
        <span class="details"><button id="buttonHide">Show Summaries</button></span>
      </span>

            <p class="classsummary">
                
                

                This is the base class for all of the predefined diagram layout implementations.They only arrange <a href="../symbols/Part.html" class="linkConstructor">Part</a>s (primarily <a href="../symbols/Node.html" class="linkConstructor">Node</a>s and <a href="../symbols/Link.html" class="linkConstructor">Link</a>s) in a <a href="../symbols/Diagram.html" class="linkConstructor">Diagram</a>,not to <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>s in <a href="../symbols/Panel.html" class="linkConstructor">Panel</a>s (i.e. panel layout).<p>The layout classes include <a href="../symbols/TreeLayout.html" class="linkConstructor">TreeLayout</a>, <a href="../symbols/ForceDirectedLayout.html" class="linkConstructor">ForceDirectedLayout</a>,<a href="../symbols/LayeredDigraphLayout.html" class="linkConstructor">LayeredDigraphLayout</a>, <a href="../symbols/CircularLayout.html" class="linkConstructor">CircularLayout</a>, and <a href="../symbols/GridLayout.html" class="linkConstructor">GridLayout</a>.This base class is not abstract -- in fact an instance of this base class is the defaultvalue for <a href="../symbols/Diagram.html#layout" class="linkProperty">Diagram.layout</a> and for <a href="../symbols/Group.html#layout" class="linkProperty">Group.layout</a>.<p>An instance of a Layout class will be the value of <a href="../symbols/Diagram.html#layout" class="linkProperty">Diagram.layout</a>.That layout positions the graph of top-level nodes and links.Nodes and links that belong to a <a href="../symbols/Group.html" class="linkConstructor">Group</a> are laid out by that group's <a href="../symbols/Group.html#layout" class="linkProperty">Group.layout</a>.The Diagram will automatically perform all nested group layouts before laying out the whole diagram.<p>If you have position information for all of the nodes when you load a model,you will typically have data bound the <a href="../symbols/Part.html#location" class="linkProperty">Part.location</a> to some property on your node data.In order to avoid an initial layout causing those saved node positions to be discarded,you can either not set the <a href="../symbols/Diagram.html#layout" class="linkProperty">Diagram.layout</a> to a predefined layout or you canset <a href="../symbols/Layout.html#isInitial" class="linkProperty">isInitial</a> to false.<p>Because performing layouts can be expensive in space and time, automatic layoutsare performed only on "invalid" layouts, and only well after a layout has been invalidated.This state is held by the <a href="../symbols/Layout.html#isValidLayout" class="linkProperty">isValidLayout</a> property.Many standard operations, such as adding or removing nodes or links, will causethe layout that is responsible for positioning those nodes or routing those linksto be invalidated.Such invalidation is performed by calling <a href="../symbols/Layout.html#invalidateLayout" class="linkMethod">invalidateLayout</a>,which not only clears the <a href="../symbols/Layout.html#isValidLayout" class="linkProperty">isValidLayout</a> state but also requests that the diagramdo an automatic layout soon.You can avoid such invalidations by setting <a href="../symbols/Layout.html#isOngoing" class="linkProperty">isOngoing</a> to false.<p>Layouts will ignore parts that have <a href="../symbols/Part.html#isLayoutPositioned" class="linkProperty">Part.isLayoutPositioned</a> set to falseor parts that are not <a href="../symbols/GraphObject.html#visible" class="linkProperty">GraphObject.visible</a>.Layouts will also ignore parts that are in layers that are <a href="../symbols/Layer.html#isTemporary" class="linkProperty">Layer.isTemporary</a>.<p>Various operations on <a href="../symbols/Part.html" class="linkConstructor">Part</a>s will cause the responsible Layout to be invalidated.This includes adding or removing parts, changing their visibility, and changing their size.You can disable such automatic layout invalidations by setting <a href="../symbols/Part.html#layoutConditions" class="linkProperty">Part.layoutConditions</a>to the combination of Part flags named "Layout..." that you want.<p>But operations on parts are not the only way in which layouts become invalidated.Setting most properties on the layouts, thereby changing their behavior, will invalidate that layout.Replacing the <a href="../symbols/Diagram.html#layout" class="linkProperty">Diagram.layout</a> or <a href="../symbols/Group.html#layout" class="linkProperty">Group.layout</a> will automatically invalidate the new layout.If <a href="../symbols/Layout.html#isViewportSized" class="linkProperty">isViewportSized</a> is true, when a diagram's <a href="../symbols/Diagram.html#viewportBounds" class="linkProperty">Diagram.viewportBounds</a> changes size,the <a href="../symbols/Diagram.html#layout" class="linkProperty">Diagram.layout</a> is invalidated.(This is normally only true for <a href="../symbols/GridLayout.html" class="linkConstructor">GridLayout</a>s when its <a href="../symbols/GridLayout.html#wrappingWidth" class="linkProperty">GridLayout.wrappingWidth</a> is <code>NaN</code>.Most layouts do not care about the size of the viewport.)<p>You can also explicitly call <a href="../symbols/Diagram.html#layoutDiagram" class="linkMethod">Diagram.layoutDiagram</a>, which can invalidate all layouts andthen perform them all.But we recommend that you avoid doing so, to allow the normal updating process perform layouts as needed.<p>If an automatic layout is the first time that a layout has been performed for the model,the diagram first raises the <a href="../symbols/DiagramEvent.html" class="linkConstructor">DiagramEvent</a> named "InitialLayoutCompleted".Whenever a Diagram finishes an automatic layout, it raises the DiagramEvent named "LayoutCompleted".<p>It is also possible to call <a href="../symbols/Layout.html#doLayout" class="linkMethod">doLayout</a> explicitly, but this is uncommon and only used withinstances of Layout that are not the <a href="../symbols/Diagram.html#layout" class="linkProperty">Diagram.layout</a> or <a href="../symbols/Group.html#layout" class="linkProperty">Group.layout</a>.It should only be needed when you want to layout a collection of nodes and links that is notthe normal graph of top-level parts of a Diagram or a subgraph of a Group.<p>More complicated layouts make use of a separate <a href="../symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a>, consisting of <a href="../symbols/LayoutVertex.html" class="linkConstructor">LayoutVertex</a>es and <a href="../symbols/LayoutEdge.html" class="linkConstructor">LayoutEdge</a>s,that normally holds a graph that is isomorphic to the graph consisting of <a href="../symbols/Node.html" class="linkConstructor">Node</a>s and <a href="../symbols/Link.html" class="linkConstructor">Link</a>s in the <a href="../symbols/Diagram.html" class="linkConstructor">Diagram</a> or <a href="../symbols/Group.html" class="linkConstructor">Group</a>.The implementation of <a href="../symbols/Layout.html#doLayout" class="linkMethod">doLayout</a> will call <a href="../symbols/Layout.html#makeNetwork" class="linkMethod">makeNetwork</a> and remember the result as the <a href="../symbols/Layout.html#network" class="linkProperty">network</a>.<a href="../symbols/Layout.html#makeNetwork" class="linkMethod">makeNetwork</a> will call <a href="../symbols/Layout.html#createNetwork" class="linkMethod">createNetwork</a> and initialize it by adding new instances of LayoutVertexes and LayoutEdgescorresponding to the given collection of Nodes and Links.<p>When <a href="../symbols/Layout.html#doLayout" class="linkMethod">doLayout</a> is finished with its work it will call <a href="../symbols/Layout.html#updateParts" class="linkMethod">updateParts</a>, which will call <a href="../symbols/Layout.html#commitLayout" class="linkMethod">commitLayout</a>to set new node locations and route links. It then normally discards the <a href="../symbols/Layout.html#network" class="linkProperty">network</a>.<p>The LayoutVertex and LayoutEdge instances allow the layout to work with more information about each Node and Link withoutactually modifying those Nodes and Links until <a href="../symbols/Layout.html#commitLayout" class="linkMethod">commitLayout</a> is called to actually set the Node locations and route the Links.The use of a LayoutNetwork also allows the Layout to work with a graph that is not isomorphic to the given collection of Nodes and Links.This is useful when needing to use dummy vertexes and/or edges to achieve certain layout behaviors,or when one wants to ignore certain vertexes or edges, without actually modifying or adding or removing the diagram's nodes or links.<p>An instance of this base class provides a rudimentary default layout that will positionall of the parts that have no position (i.e. the <a href="../symbols/Part.html#location" class="linkProperty">Part.location</a> is (NaN,NaN).Parts that already have a position are ignored.This primitive layout class does not make use of a <a href="../symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a> becauseit ignores all links.<p>To implement your own custom layouts, you can inherit from either this class orfrom one of the other predefined layout classes.If you inherit from this base class, you will want to override the <a href="../symbols/Layout.html#doLayout" class="linkMethod">doLayout</a> method.You can call the <a href="../symbols/Part.html#move" class="linkMethod">Part.move</a> method to re-position a part, including whole groups.Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call a base method.
            </p>

<!-- ============================== constructor summary ==================== -->
            
        <h2 id="constructor" class="summaryCaption"> Constructor <span class="nodetails"> Summary</span><span class="details"> Details</span></h2>
            <div class="table-responsive">
            <table class="summaryTable table table-bordered table-condensed" summary="A summary of the constructor documented in the class Layout.">
                <thead>
                        <tr>
                            <th scope="col" class="name">Name</th>
                            <th scope="col" class="description">Description</th>
                        </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="name" >
                            <div class="name">
                                Layout()
                            </div>
              </td>
              <td class="description">
                            <div class="description">
                            <!--newp--><p><p>Create a minimal layout that only positions <a href="../symbols/Node.html" class="linkConstructor">Node</a>s that do not have a location.
                        
                        


              </div>
                        </td>
                    </tr>
                </tbody>
            </table>
            </div><!-- class="table-responsive">-->
            

<!-- ============================== properties summary ===================== -->
            
                
                
        <h2 class="summaryCaption">Properties<span class="nodetails"> Summary</span><span class="details"> Details</span></h2>
        <div class="table-responsive">
        <table class="summaryTable table table-bordered table-condensed" summary="A summary of the properties documented in the class Layout.">
                    <thead>
                        <tr>
                            <th scope="col" class="name">Name, Value Type</th>
                            <th scope="col" class="description">Description</th>
                        </tr>
                    </thead>
                    <tbody>
                    
              <tr id="arrangementOrigin" >
                
                <td class="name">
                  <div class="name">
                    arrangementOrigin
                  </div>
                  <div class="attributes">
                    <span class="light">{<a href="../symbols/Point.html" class="linkConstructor">Point</a>}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets the top-left point for where the graph should be positioned when laid out.<span class="nodetails" id="xproparrangementOrigin"><a class="morelink" onclick="hst('proparrangementOrigin')">More...</a></span> <span class="details" id="proparrangementOrigin">The default value for this property is the Point(0, 0).Setting this property invalidates this layout.</span>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="diagram" >
                
                <td class="name">
                  <div class="name">
                    diagram
                  </div>
                  <div class="attributes">
                    <span class="light">{<a href="../symbols/Diagram.html" class="linkConstructor">Diagram</a>}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets the <a href="../symbols/Diagram.html" class="linkConstructor">Diagram</a> that owns this layout, if it is the value of <a href="../symbols/Diagram.html#layout" class="linkProperty">Diagram.layout</a>.<span class="nodetails" id="xpropdiagram"><a class="morelink" onclick="hst('propdiagram')">More...</a></span> <span class="details" id="propdiagram"></span><div class="details" id="dpropdiagram"><p>If this property and <a href="../symbols/Layout.html#group" class="linkProperty">group</a> are non-null, the Group should be in this Diagram.</div>
                
                    <div class="seealso">See also:
                        <ul class="seealsolist">
                            
                                <li><a href="../symbols/Layout.html#group" class="linkProperty">group</a></li>
                            
                        </ul>
                    </div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="group" >
                
                <td class="name">
                  <div class="name">
                    group
                  </div>
                  <div class="attributes">
                    <span class="light">{<a href="../symbols/Group.html" class="linkConstructor">Group</a>}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets the <a href="../symbols/Group.html" class="linkConstructor">Group</a> that uses this layout, if it is the value of a group's <a href="../symbols/Group.html#layout" class="linkProperty">Group.layout</a>.<span class="nodetails" id="xpropgroup"><a class="morelink" onclick="hst('propgroup')">More...</a></span> <span class="details" id="propgroup"></span><div class="details" id="dpropgroup"><p>If this property is set to a Group, the <a href="../symbols/Layout.html#diagram" class="linkProperty">diagram</a> is automatically set to be the Group's Diagram.</div>
                
                    <div class="seealso">See also:
                        <ul class="seealsolist">
                            
                                <li><a href="../symbols/Layout.html#diagram" class="linkProperty">diagram</a></li>
                            
                        </ul>
                    </div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="isInitial" >
                
                <td class="name">
                  <div class="name">
                    isInitial
                  </div>
                  <div class="attributes">
                    <span class="light">{boolean}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets whether this layout is performed on an initial layout.<span class="nodetails" id="xpropisInitial"><a class="morelink" onclick="hst('propisInitial')">More...</a></span> <span class="details" id="propisInitial">The default value is true.Setting this property to false causes <a href="../symbols/Layout.html#isValidLayout" class="linkProperty">isValidLayout</a> to be set to trueso that the diagram does not perform this layout.</span><div class="details" id="dpropisInitial"><p>If you set both <a href="../symbols/Layout.html#isInitial" class="linkProperty">isInitial</a> and <a href="../symbols/Layout.html#isOngoing" class="linkProperty">isOngoing</a> to false,there will be no automatic layout invalidation, because <a href="../symbols/Layout.html#invalidateLayout" class="linkMethod">invalidateLayout</a>will not set <a href="../symbols/Layout.html#isValidLayout" class="linkProperty">isValidLayout</a> to false.To get your nodes to appear, you will need to explicitly set or data-bind their <a href="../symbols/Part.html#location" class="linkProperty">Part.location</a>or <a href="../symbols/GraphObject.html#position" class="linkProperty">GraphObject.position</a> to real Point values, because automatic layout will not assign any positions.<p>Another way of controlling when layouts are invalidated is by setting<a href="../symbols/Part.html#isLayoutPositioned" class="linkProperty">Part.isLayoutPositioned</a> or <a href="../symbols/Part.html#layoutConditions" class="linkProperty">Part.layoutConditions</a>.</div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="isOngoing" >
                
                <td class="name">
                  <div class="name">
                    isOngoing
                  </div>
                  <div class="attributes">
                    <span class="light">{boolean}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets whether this layout can be invalidated by <a href="../symbols/Layout.html#invalidateLayout" class="linkMethod">invalidateLayout</a>.<span class="nodetails" id="xpropisOngoing"><a class="morelink" onclick="hst('propisOngoing')">More...</a></span> <span class="details" id="propisOngoing">Set this to false to prevent actions such as adding or removing Parts from invalidating this layout.The default value is true.Setting this property does not invalidate this layout.</span><div class="details" id="dpropisOngoing"><p>If you set both <a href="../symbols/Layout.html#isInitial" class="linkProperty">isInitial</a> and <a href="../symbols/Layout.html#isOngoing" class="linkProperty">isOngoing</a> to false,there will be no automatic layout invalidation, because <a href="../symbols/Layout.html#invalidateLayout" class="linkMethod">invalidateLayout</a>will not set <a href="../symbols/Layout.html#isValidLayout" class="linkProperty">isValidLayout</a> to false.To get your nodes to appear, you will need to explicitly set or data-bind their <a href="../symbols/Part.html#location" class="linkProperty">Part.location</a>or <a href="../symbols/GraphObject.html#position" class="linkProperty">GraphObject.position</a> to real Point values, because automatic layout will not assign any positions.<p>Another way of controlling when layouts are invalidated is by setting<a href="../symbols/Part.html#isLayoutPositioned" class="linkProperty">Part.isLayoutPositioned</a> or <a href="../symbols/Part.html#layoutConditions" class="linkProperty">Part.layoutConditions</a>.</div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="isRealtime" >
                
                <td class="name">
                  <div class="name">
                    isRealtime
                  </div>
                  <div class="attributes">
                    <span class="light">{boolean}</span>
                    
                      <span class="since" title="since">1.2</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets whether this layout be performed in real-time, before the end of a transaction.<span class="nodetails" id="xpropisRealtime"><a class="morelink" onclick="hst('propisRealtime')">More...</a></span> <span class="details" id="propisRealtime">All layouts that are invalidated will be performed at the end of a transaction.The default value is true.Setting this property does not invalidate this layout.</span>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="isRouting" >
                
                <td class="name">
                  <div class="name">
                    isRouting
                  </div>
                  <div class="attributes">
                    <span class="light">{boolean}</span>
                    
                      <span class="since" title="since">1.1</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets whether this layout routes <a href="../symbols/Link.html" class="linkConstructor">Link</a>s.<span class="nodetails" id="xpropisRouting"><a class="morelink" onclick="hst('propisRouting')">More...</a></span> <span class="details" id="propisRouting">The default value is true.When false, this layout will not explicitly set the <a href="../symbols/Link.html#points" class="linkProperty">Link.points</a>,and the default routing of each individual Link will take place after the Nodes are moved by <a href="../symbols/Layout.html#commitLayout" class="linkMethod">commitLayout</a>.Setting this property does not invalidate this layout.</span><div class="details" id="dpropisRouting"><p>Some layouts ignore links, in which case this property is ignored.</div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="isValidLayout" >
                
                <td class="name">
                  <div class="name">
                    isValidLayout
                  </div>
                  <div class="attributes">
                    <span class="light">{boolean}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets whether this layout needs to be performed again (if false).<span class="nodetails" id="xpropisValidLayout"><a class="morelink" onclick="hst('propisValidLayout')">More...</a></span> <span class="details" id="propisValidLayout">Instead of setting this property directly, it is normal to set it to false by calling <a href="../symbols/Layout.html#invalidateLayout" class="linkMethod">invalidateLayout</a>,since that also requests performing a layout in the near future.</span>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="isViewportSized" >
                
                <td class="name">
                  <div class="name">
                    isViewportSized
                  </div>
                  <div class="attributes">
                    <span class="light">{boolean}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets whether this layout depends on the <a href="../symbols/Diagram.html#viewportBounds" class="linkProperty">Diagram.viewportBounds</a>'s size.<span class="nodetails" id="xpropisViewportSized"><a class="morelink" onclick="hst('propisViewportSized')">More...</a></span> <span class="details" id="propisViewportSized">If set to true, the layout will invalidate when the Diagram's viewport changes size.This only applies to diagram layouts, not to group layouts,and only when <a href="../symbols/Diagram.html#autoScale" class="linkProperty">Diagram.autoScale</a> is set to <a href="../symbols/Diagram.html#None" class="linkConstant">Diagram.None</a>.The default value is false.Setting this property to true will invalidate this layout.</span>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="network" >
                
                <td class="name">
                  <div class="name">
                    network
                  </div>
                  <div class="attributes">
                    <span class="light">{<a href="../symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a>}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets the <a href="../symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a> used by this Layout, if any.<span class="nodetails" id="xpropnetwork"><a class="morelink" onclick="hst('propnetwork')">More...</a></span> <span class="details" id="propnetwork">The default value is null.Setting this property does not invalidate this layout.Not all kinds of layout make use of a <a href="../symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a>.Call <a href="../symbols/Layout.html#createNetwork" class="linkMethod">createNetwork</a> or <a href="../symbols/Layout.html#makeNetwork" class="linkMethod">makeNetwork</a> to create a network.</span>
                
                </div>
                            </td>
                        </tr>
                    
                    </tbody>
                </table>
                </div><!-- class="table-responsive">-->
                

                
            

<!-- ============================== methods summary ======================== -->
            
                
                
        <h2 class="summaryCaption">Method <span class="nodetails"> Summary</span><span class="details"> Details</span></h2>
                <div class="table-responsive">
                <table class="summaryTable table table-bordered table-condensed" summary="A summary of the methods documented in the class Layout.">
                    <thead>
                        <tr>
                            <th scope="col" class="name">Name, Return Type</th>
                            <th scope="col" class="description">Description</th>
                        </tr>
                    </thead>
                    <tbody>
                    
            <tr id="cloneProtected">
                <td class="name">
                  
                  <div class="name">
                    cloneProtected(copy)
                  </div>
                  <div class="attributes">
                    
                    
                      <span class="since" title="since">1.6</span>
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Copies properties from this object to the given object, which is of the same class.<span class="nodetails" id="xmethcloneProtected"><a class="morelink" onclick="hst('methcloneProtected')">More...</a></span> <span class="details" id="methcloneProtected">This is called by <a href="../symbols/Layout.html#copy" class="linkMethod">copy</a> and should be overridden for each class that adds properties.There are examples of such overrides in the samples.Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.</span>
                 
                              
                                  <dl class="detailList">
                                  <dt class="heading">Parameters:</dt>
                                  
                                      <dt>
                                          <span class="light fixedFont">{<a href="../symbols/Layout.html" class="linkConstructor">Layout</a>}</span> <b>copy</b>
                                          
                                      </dt>
                                      <dd></dd>
                                  
                                  </dl>
                              
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="commitLayout">
                <td class="name">
                  
                  <div class="name">
                    commitLayout()
                  </div>
                  <div class="attributes">
                    
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>When using a <a href="../symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a>, commit changes to the diagramby setting <a href="../symbols/Node.html" class="linkConstructor">Node</a> positions and by routing the <a href="../symbols/Link.html" class="linkConstructor">Link</a>s.<span class="nodetails" id="xmethcommitLayout"><a class="morelink" onclick="hst('methcommitLayout')">More...</a></span> <span class="details" id="methcommitLayout">This is called by <a href="../symbols/Layout.html#updateParts" class="linkMethod">updateParts</a> within a transaction.</span><div class="details" id="dmethcommitLayout"><p>You should not call this method -- it is a "protected virtual" method.This may be overridden by subclasses of Layout.By default this method is implemented as follows:<pre>Layout.prototype.commitLayout = function() {  var vit = this.network.vertexes.iterator;  while (vit.next()) {    var vert = vit.value;    vert.commit();  }  if (this.isRouting) {    var eit = this.network.edges.iterator;    while (eit.next()) {      var edge = eit.value;      edge.commit();    }  }}</pre><p>Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.</div>
                 
                              
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="copy">
                <td class="name">
                  
                  <div class="name">
                    copy()
                  </div>
                  <div class="attributes">
                    <span class="light">{<a href="../symbols/Layout.html" class="linkConstructor">Layout</a>}</span>
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Creates a copy of this Layout and returns it.<span class="nodetails" id="xmethcopy"><a class="morelink" onclick="hst('methcopy')">More...</a></span> <span class="details" id="methcopy">When a <a href="../symbols/Group.html" class="linkConstructor">Group</a> is copied that has a <a href="../symbols/Group.html#layout" class="linkProperty">Group.layout</a>, the <a href="../symbols/Layout.html" class="linkConstructor">Layout</a> must also be copied.This calls <a href="../symbols/Layout.html#cloneProtected" class="linkMethod">cloneProtected</a> on a newly constructed Layout.</span>
                 
                              
                              
                                  <dl class="detailList">
                                  <dt class="heading">Returns:</dt>
                                  
                                      <dt><span class="light fixedFont">{<a href="../symbols/Layout.html" class="linkConstructor">Layout</a>}</span> </dt>
                                  
                                  </dl>
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="createNetwork">
                <td class="name">
                  
                  <div class="name">
                    createNetwork()
                  </div>
                  <div class="attributes">
                    <span class="light">{<a href="../symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a>}</span>
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Create a new <a href="../symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a> of <a href="../symbols/LayoutVertex.html" class="linkConstructor">LayoutVertex</a>es and <a href="../symbols/LayoutEdge.html" class="linkConstructor">LayoutEdge</a>s.<span class="nodetails" id="xmethcreateNetwork"><a class="morelink" onclick="hst('methcreateNetwork')">More...</a></span> <span class="details" id="methcreateNetwork">This may be overridden in Layout subclasses to create instances of subclasses of<a href="../symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a>.Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.</span>
                 
                              
                              
                                  <dl class="detailList">
                                  <dt class="heading">Returns:</dt>
                                  
                                      <dt><span class="light fixedFont">{<a href="../symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a>}</span> a new <a href="../symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a>.</dt>
                                  
                                  </dl>
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="doLayout">
                <td class="name">
                  
                  <div class="name">
                    doLayout(coll)
                  </div>
                  <div class="attributes">
                    
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Position all of the nodes that do not have an assigned <a href="../symbols/Part.html#location" class="linkProperty">Part.location</a>in the manner of a simple rectangular array.<span class="nodetails" id="xmethdoLayout"><a class="morelink" onclick="hst('methdoLayout')">More...</a></span> <span class="details" id="methdoLayout">The default implementation ignores all <a href="../symbols/Group.html" class="linkConstructor">Group</a>s and <a href="../symbols/Link.html" class="linkConstructor">Link</a>s;many subclasses of <a href="../symbols/Layout.html" class="linkConstructor">Layout</a> ignore all instances of <a href="../symbols/Part.html" class="linkConstructor">Part</a>sthat are not <a href="../symbols/Node.html" class="linkConstructor">Node</a>s or <a href="../symbols/Link.html" class="linkConstructor">Link</a>s.</span><div class="details" id="dmethdoLayout"><p>You can override this method to do whatever node positioning and link routingthat you wish.<p>When the layout makes use of a <a href="../symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a>,this method should call <a href="../symbols/Layout.html#makeNetwork" class="linkMethod">makeNetwork</a> and <a href="../symbols/Layout.html#updateParts" class="linkMethod">updateParts</a>.The <a href="../symbols/Layout.html#updateParts" class="linkMethod">updateParts</a> method will call <a href="../symbols/Layout.html#commitLayout" class="linkMethod">commitLayout</a> within a transaction.The outline of such an override should be like:<pre>CustomNetworkLayout.prototype.doLayout = function(coll) {  if (this.network === null) this.network = this.makeNetwork(coll);  // assign LayoutVertex.bounds to all vertexes in the network:  var vit = this.network.vertexes.iterator;  while (vit.next()) {    var v = vit.value;    v.centerX = ...    v.centerY = ...  }  this.updateParts();  this.network = null;};</pre>Override <a href="../symbols/Layout.html#commitLayout" class="linkMethod">commitLayout</a> to actually position nodes and route links.<p>When the layout does not make use of a <a href="../symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a>,this method should make direct changes to <a href="../symbols/Node.html" class="linkConstructor">Node</a>s and <a href="../symbols/Link.html" class="linkConstructor">Link</a>swithin a transaction.Examples are provided in the Extensions directory.<p>If this Layout belongs to a Diagram, the argument must be either the same Diagram or must denote Parts that belong to the Diagram.Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.</div>
                 
                              
                                  <dl class="detailList">
                                  <dt class="heading">Parameters:</dt>
                                  
                                      <dt>
                                          <span class="light fixedFont">{<a href="../symbols/Diagram.html" class="linkConstructor">Diagram</a>|<a href="../symbols/Group.html" class="linkConstructor">Group</a>|Iterable.<Part>}</span> <b>coll</b>
                                          
                                      </dt>
                                      <dd>A <a href="../symbols/Diagram.html" class="linkConstructor">Diagram</a> or a <a href="../symbols/Group.html" class="linkConstructor">Group</a> or a collection of <a href="../symbols/Part.html" class="linkConstructor">Part</a>s.</dd>
                                  
                                  </dl>
                              
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="invalidateLayout">
                <td class="name">
                  
                  <div class="name">
                    invalidateLayout()
                  </div>
                  <div class="attributes">
                    
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>If <a href="../symbols/Layout.html#isOngoing" class="linkProperty">isOngoing</a> is true and if an initial layout has not yet been performed,set the <a href="../symbols/Layout.html#isValidLayout" class="linkProperty">isValidLayout</a> property to false, and ask to perform another layout in the near future.<span class="nodetails" id="xmethinvalidateLayout"><a class="morelink" onclick="hst('methinvalidateLayout')">More...</a></span> <span class="details" id="methinvalidateLayout">If <a href="../symbols/Layout.html#isInitial" class="linkProperty">isInitial</a> is true, this layout is invalidated only when the <a href="../symbols/Diagram.html#model" class="linkProperty">Diagram.model</a> is replaced,not under the normal circumstances such as when parts are added or removed ordue to other calls to <a href="../symbols/Layout.html#invalidateLayout" class="linkMethod">Layout.invalidateLayout</a>.</span><div class="details" id="dmethinvalidateLayout"><p>If you set both <a href="../symbols/Layout.html#isInitial" class="linkProperty">isInitial</a> and <a href="../symbols/Layout.html#isOngoing" class="linkProperty">isOngoing</a> to false,there will be no automatic layout invalidation, because this methodwill not set <a href="../symbols/Layout.html#isValidLayout" class="linkProperty">isValidLayout</a> to false.However you can still set <a href="../symbols/Layout.html#isValidLayout" class="linkProperty">isValidLayout</a> explicitly.<p>This is typically called when a layout property value has changed,or when a Part is added or removed or changes visibility, if <a href="../symbols/Part.html#layoutConditions" class="linkProperty">Part.layoutConditions</a> includes the pertinent flags.</div>
                 
                              
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="makeNetwork">
                <td class="name">
                  
                  <div class="name">
                    makeNetwork(coll)
                  </div>
                  <div class="attributes">
                    <span class="light">{<a href="../symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a>}</span>
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Create and initialize a <a href="../symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a> with the given nodes and links.<span class="nodetails" id="xmethmakeNetwork"><a class="morelink" onclick="hst('methmakeNetwork')">More...</a></span> <span class="details" id="methmakeNetwork">This should be called by <a href="../symbols/Layout.html#doLayout" class="linkMethod">doLayout</a> when this layout uses a <a href="../symbols/Layout.html#network" class="linkProperty">network</a>.This method calls <a href="../symbols/Layout.html#createNetwork" class="linkMethod">createNetwork</a> to allocate the network.This may be overridden in Layout subclasses to customize the initialization.Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.</span>
                 
                              
                                  <dl class="detailList">
                                  <dt class="heading">Parameters:</dt>
                                  
                                      <dt>
                                          <span class="light fixedFont">{<a href="../symbols/Diagram.html" class="linkConstructor">Diagram</a>|<a href="../symbols/Group.html" class="linkConstructor">Group</a>|Iterable.<Part>}</span> <b>coll</b>
                                          
                                      </dt>
                                      <dd>A <a href="../symbols/Diagram.html" class="linkConstructor">Diagram</a> or a <a href="../symbols/Group.html" class="linkConstructor">Group</a> or a collection of <a href="../symbols/Part.html" class="linkConstructor">Part</a>s.</dd>
                                  
                                  </dl>
                              
                              
                                  <dl class="detailList">
                                  <dt class="heading">Returns:</dt>
                                  
                                      <dt><span class="light fixedFont">{<a href="../symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a>}</span> normally the value of a call to <a href="../symbols/Layout.html#createNetwork" class="linkMethod">createNetwork</a> initialized by vertexes and edges corresponding to the <i>coll</i> argument.</dt>
                                  
                                  </dl>
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="updateParts">
                <td class="name">
                  
                  <div class="name">
                    updateParts()
                  </div>
                  <div class="attributes">
                    
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>When using a <a href="../symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a>, update the "physical" node positionings and link routings.<span class="nodetails" id="xmethupdateParts"><a class="morelink" onclick="hst('methupdateParts')">More...</a></span> <span class="details" id="methupdateParts">This should be called by <a href="../symbols/Layout.html#doLayout" class="linkMethod">doLayout</a> when this layout uses a <a href="../symbols/Layout.html#network" class="linkProperty">network</a>.This calls <a href="../symbols/Layout.html#commitLayout" class="linkMethod">commitLayout</a> to actually set <a href="../symbols/Node.html" class="linkConstructor">Node</a> positions and route <a href="../symbols/Link.html" class="linkConstructor">Link</a>s.This performs the changes within a transaction.Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.</span>
                 
                              
                              

                </div>
                            </td>
                        </tr>
                    
                    </tbody>
                </table>
                </div><!-- class="table-responsive">-->
                

                
            
<!-- ============================== events summary ======================== -->
            

<!-- ============================== fields summary ===================== -->
            
                
                

            

<!-- ============================== constructor details ==================== -->

        </div> <!-- end contentBody -->
    </div> <!-- end row -->
    </div> <!-- end container-fluid -->

<!-- ============================== footer ================================= -->
        <div id="footer" class="fineprint" style="clear:both">
            Copyright &copy; 1998-2016 by <a href="https://www.nwoods.com/">Northwoods Software Corporation.</a>
        </div>
    </body>
</html>
